<template>
  <div class="gamemy-list-wrapper">
    <a class="game" href="javascript:;" v-for="item in gameList" @click.stop.prevent="_clickRow(item)">
      <div class="official-game-icon" v-if='item.GAME_TYPE == "NETDS" || item.GAME_TYPE == ""'>排名赛</div>
      <div class="team-game-icon" v-else-if='item.GAME_TYPE == "TDS"'>团队赛</div>
      <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "CLS"'>超级赛</div>
      <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "JYS"'>精英赛</div>
      <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "QGS"'>全国赛</div>
      <div class="official-game-icon" v-else-if='item.GAME_KIND == "1"'>官方</div>
      <div class="text-center">
        <img src="~assets/images/shuyezuo@3x.png">
        <div class="games-block-content">
          <div class="game-name">{{item.UP_GAME_NAME || item.GAME_NAME}}</div>
          <div class="date">
            <span>{{item.FORMAT_BEGIN_DATE}} - {{item.FORMAT_END_DATE}}</span>
            <b>
              <i class="arrow-right1"></i><i class="arrow-right2"></i>
            </b>
          </div>
        </div>
        <img src="~assets/images/shuyeyou@3x.png">
      </div>

      <div class="game-row">

        <div class="game-row-item">
          <div class="key">参加人数</div>
          <div class="value color-blue">
            {{item.GAME_ATTEND_PERSON}}<span class="color-gray" v-if="item.JOIN_BEGIN_DATE && item.JOIN_BEGIN_DATE!=0">/{{item.GAME_MAX_LIMIT}}</span>
          </div>
        </div>

        <div class="game-row-item">
          <div v-if="item.GAME_STEP < 3 && dateNow < item.BEGIN_DATE" class="time_closing" v-text="item.timeClosing"></div>
          <template v-else-if="item.GAME_STEP == 3 || item.GAME_STEP == 4">
            <div class="key">我的排名</div>
            <div v-text="item.ranknum <= 0?'--':item.ranknum" class="value rank"></div>
          </template>
          <!--<div v-else-if="item.DELETE == 1" class="value color-gray">比赛已删除</div>-->
          <!--<div v-else-if="item.GAME_STATUS !=1 || item.GAME_STEP == 5" class="value color-gray">审核未通过</div>-->
        </div>

        <div class="game-row-item" v-if="item.GAME_TYPE == 'TDS' && item.GAME_STEP > 2">
          <div class="key">我的团队</div>
          <div class="value">{{item.GAME_NAME}}</div>
        </div>

        <div class="game-row-item statue">
          <div v-if="item.DELETE == 1 || item.GAME_STEP == 5 " class="color-gray">比赛失效</div>
          <div v-else-if="item.GAME_STATUS == 0" class="blue">待审核</div>
          <div v-else-if="item.GAME_STATUS == 2" class="blue">审核中</div>
          <div v-else-if="item.GAME_STEP == 0" class="blue">未开放报名</div>
          <div v-else-if="item.GAME_STEP == 1" class="blue">报名中</div>
          <div v-else-if="item.GAME_STEP == 2" class="blue">报名结束</div>
          <div v-else-if="item.GAME_STEP == 3" class="red">进行中</div>
          <div v-else-if="item.GAME_STEP == 4" class="color-gray">已结束</div>
        </div>

      </div>

      <div class='forward'>
        <i class='iconfont icon-xiangyou'></i>
      </div>
    </a>

  </div>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'

  export default {
    data(){
      return {
        dateNow: '',
        timeNow: '',
        baseDateTime: '',
        index: 0,
        timeschel: ''
      }
    },
    props: {
      gameList: {
        type: Array
      }
    },
    mounted: function () {
      this.timeNow = Number(CommonUtil.getTodayFormatTime());
      this.dateNow = Number(CommonUtil.getTodayFormatDate());
      this._countdownTime();
    },
    beforeDestroy: function () {
      clearInterval(this.timeschel);
    },
    methods: {
      _countdownTime(){
        var self = this;
        RemoteDAO.callGT1008(function (response) {
          if (response.error == "0") {
            self.timeNow = response.data.body.time;
            self.dateNow = response.data.body.date;
          }
          var time1 = (CommonUtil.formatDate(self.dateNow) + " " + CommonUtil.formatTime(self.timeNow)).toString();
          self.baseDateTime = new Date(time1.replace(/-/g, "/")); // 1991/11/11 11：11:12 兼容各浏览器的new Date()

          self.timeschel = setInterval(function () {
            if (typeof self.index === "undefined") {
              self.index = 0;
            }
            _.each(self.gameList, function (item, index) {
              if (item.GAME_STEP < 3) {
                var beginDate = item.BEGIN_DATE;
                var time2 = (CommonUtil.formatDate(beginDate) + " 00:00:00").toString();
                var endTime = new Date(time2.replace(/-/g, "/")); // 比赛开始时间
                var nowTime = self.baseDateTime;
                var t = endTime.getTime() - nowTime.getTime() - 1000 * self.index;
                var d = 0, h = 0, m = 0, s = 0;
                if (t >= 0) {
                  d = Math.floor(t / 1000 / 60 / 60 / 24);
                  h = Math.floor(t / 1000 / 60 / 60 % 24);
                  m = Math.floor(t / 1000 / 60 % 60);
                  s = Math.floor(t / 1000 % 60);
                }
                if (h < 10) {
                  h = "0" + h;
                }
                if (m < 10) {
                  m = "0" + m;
                }
                if (s < 10) {
                  s = "0" + s;
                }
                item.timeClosing = d + "天" + h + ":" + m + ":" + s;
              }
            });
            self.index++;
          }, 1000);
        });
      },
      _clickRow(item){
        if (item.GAME_TYPE === 'TDS') {
          this.$router.push({ path: '/team-game/game-detail', query: { gameId: item.UP_GAME_ID, gameName: item.UP_GAME_NAME }});
        } else {
          this.$router.push({
            path: '/game/gamedetail', query: {
              gameId: item.GAME_ID,
              gameName: item.GAME_NAME,
              gameMaxLimit: item.GAME_MAX_LIMIT,
              gameAttendPerson: item.GAME_ATTEND_PERSON,
              createUser: item.CREATE_USER,
              joinBeginDate: item.JOIN_BEGIN_DATE,
              joinEndDate: item.JOIN_END_DATE,
              beginDate: item.BEGIN_DATE,
              endDate: item.END_DATE
            }
          });
        }
      }
    }
  }

</script>

<style scoped>
  .game-row{
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
  .game-row-item{
    text-align: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }
  .game-row-item >div {
    text-align: center;
    white-space: nowrap;
    padding: 0 2px;
    width: 100%;
  }
  .value{
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
